<script setup>
/**
 * & 文件引入区域
 */

/**
 * & 注册区
 */
defineProps(["data"]);

/**
 * & 变量声明区
 */

/**
 * & 函数区
 */
</script>

<template>
  <div class="commentCom" v-if="data">
    <div class="item" v-for="item in data" :key="item.evaluateId">
      <div class="user">
        <img :src="item.userImage" alt="" class="Avatar" />
        <div class="name">{{ item.userName }}</div>
      </div>
      <div class="title">
        {{ item.evaluate }}
      </div>
      <div class="subTitle">
        {{ item.evaluate }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.commentCom {
  position: relative;
  z-index: 100;
  width: 100%;
  background: #fff;
  margin-bottom: 10rem;

  > .item {
    padding: 16rem;
    padding-top: 12rem;

    .user {
      position: relative;
      padding-bottom: 10rem;
      margin-bottom: 10rem;

      display: flex;
      align-items: center;

      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;

        height: 1rem;
        width: 100%;
        background: #e6e6e6;
      }

      .name {
        font-size: 14rem;
        line-height: 20rem;
        font-weight: 500;
        margin-left: 5rem;
      }
    }

    .title,
    .subTitle {
      line-height: 16rem;
      font-size: 14rem;
      font-weight: 400;
    }

    .title {
      color: #333333;
      margin-bottom: 8rem;
      padding-right: 10rem;
      font-weight: 500;
    }

    .subTitle {
      color: #999999;
    }
  }
}
</style>
